// : (\d{2,})px
//: px2Rem($1px)


// // PX 转 rem
@function px2Rem($px, $base-font-size: 19.2px) {
    @if (unitless($px)) {
        //有无单位
        @return ($px / 19.2) * 1rem;
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}


.container-fluid {
    padding-left: px2Rem(360px) !important;
    padding-right: px2Rem(360px) !important
}

.container {
    max-width: px2Rem(1200px) !important
}
.ib1{
    height:1000px;
}
.bb2{
    position: absolute;top: px2Rem(735px);left: 10%;right: 10%;
}
.section-three-features{
    margin-top: px2Rem(100px);
}
.top_card{
    padding:10%;
    height:520px;
    width: 100%;
}

.top_card .it1{
    margin-top: 5%;
    width: px2Rem(70px);height:70px
}
.top_card .it2{
    width: px2Rem(200px);
    height: px2Rem(30px);
}
.top_card .top_title{
    line-height:40px;
    margin-top: px2Rem(20px);
    font-size: px2Rem(20px);
    padding:0px;
}

.ff1{
    width: px2Rem(770px);
    left: 0;position: absolute;
}


.round{
    width: px2Rem(1500px);
    height: px2Rem(1500px);
    position: absolute;
    left: px2Rem(750px);
    border: px2Rem(13px) solid rgba(220, 220, 220, 0.1);
    border-radius: px2Rem(750px);
    clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 0% 0%);
    -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 50% 50%);
}
.round3{
    width: px2Rem(1700px);
    height: px2Rem(1700px);
    position: absolute;
    top: px2Rem(120px);
    left: px2Rem(850px);
    padding: px2Rem(20px);
    margin: px2Rem(50px);
    border: px2Rem(2px) solid rgba(200, 200, 200, 0.1);
    border-radius: 50%;
    clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, -10% 0%);
}
.round2{
    width: px2Rem(1800px);
    height: px2Rem(1800px);
    top: px2Rem(130px);
    left: px2Rem(850px);
    position: absolute;
    border-radius: px2Rem(870px);
    clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, -10% 0%);
    -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 3600%, 50% 50%);
    -webkit-animation: rotate 20s linear infinite;
            animation: rotate 20s linear infinite
  
}
.round2 ul,li{
    margin: 0;
    text-align: center;
    list-style-type: none;
    padding: 0;
}
.round2 ul,li:hover{
    margin: 0;
    /* background-image: url('./../web/border.png'); */
    background-size: 100% 100%;
    text-align: center;
    color: white;
    list-style-type: none;
    padding: 0;
}
.round2 ul{
    width: px2Rem(1800px);
    height: px2Rem(1800px);
    padding: px2Rem(50px);
    position: relative;
}
.round2 li{
    position: absolute;
    border-radius: 50%;
    line-height: px2Rem(40px);
    text-align: center;
    left: 50%;
    margin-left: px2Rem(15px);
    margin-top: px2Rem(10px);
}
.round2 li:nth-of-type(2){
    transform: rotate(45deg);
    transform-origin:15px 870px;
}

.round2 li:nth-of-type(3){
    transform: rotate(90deg);
    transform-origin:15px 870px;
}
.round2 li:nth-of-type(4){
    transform: rotate(135deg);
    transform-origin:15px 870px;
}
.round2 li:nth-of-type(5){
    transform: rotate(180deg);
    transform-origin:15px 870px;
}
.round2 li:nth-of-type(6){
    transform: rotate(225deg);
    transform-origin:15px 870px;
}
.round2 li:nth-of-type(7){
    transform: rotate(270deg);
    transform-origin:15px 870px;
}
.round2 li:nth-of-type(8){
    transform: rotate(315deg);
    transform-origin:15px 870px;
}

.f_item1{
    left: 45%;
    position: absolute;
    top: 10%;
}
.f_item2{
    left: 55%;
    position: absolute;
    top: 50%;
}
.f_item3{
    left: 55%;
    position: absolute;
    top: px2Rem(900px);
}
.f_item4{
    left: 45%;
    position: absolute;
    top: 80%;
}
.section-five-features{
    height:1500px
}

.f_img{
    width: px2Rem(69px);
    height: px2Rem(75px);
}
.f_title{
    margin: px2Rem(18px) 0px;
    font-size: px2Rem(32px);
    color: #FFFFFF;
    line-height: px2Rem(38px);
    letter-spacing: px2Rem(1px);
    font-family: Fontquan-XinYilogoTi-Regular;

}


.f_button{

    width: px2Rem(130px);
    height: px2Rem(35px);
    margin-top: px2Rem(19px);
    text-align: center;
    font-size: px2Rem(18px);
    border-radius: px2Rem(3px);
    font-family: Fontquan-XinYilogoTi-Regular, Fontquan-XinYilogoTi;
    font-weight: 400;
    color: #FFFFFF;
    line-height: px2Rem(32px);
    cursor: pointer;
    border: px2Rem(1px) solid #666;

}
.content{
    width: px2Rem(580px);
    font-weight: 300;
    font-size: px2Rem(16px);
    font-family: PingFangTC-Regular, PingFangTC;
    font-weight: 400;
    color: #C0C0C0;
    line-height: px2Rem(22px);

}

#section-four-features2 .f_ab{
    margin: auto 10%;
    text-align: center;
    font-size: px2Rem(24px);
    font-family: ArialMT;
    color: grey;
    line-height: px2Rem(28px);
    letter-spacing: px2Rem(1px);
    height: px2Rem(300px);border: px2Rem(0px) solid #ccc;display: flex;margin-top: px2Rem(220px);

}
.d1{
    font-size: px2Rem(32px);
    font-family: Fontquan-XinYilogoTi-Regular, Fontquan-XinYilogoTi;
    font-weight: 400;
    color: #FF4997;
    line-height: px2Rem(38px);
}
.d2{
    font-size: px2Rem(18px);
    font-family: ArialMT;
    color: #FFFFFF;
    line-height: px2Rem(30px);
}

.ifo1{
    margin: auto;
    margin-top: px2Rem(50px);
    text-align: center;
    font-family: ArialMT;
    max-width: 60%;
    letter-spacing: px2Rem(1px);
    font-size: px2Rem(32px);
    font-family: ArialMT;
    line-height: px2Rem(40px);
    color: #FFFFFF;
    opacity: 0.5 !important;

}
.container-title{
    display: flex;
    width: 100%;
    text-align: justify;
    padding-left: px2Rem(280px);
    padding-right: px2Rem(280px);
    justify-content:space-between;
    /*侧轴居中对齐*/    
}
.f_bb{
    width: 100%;height: px2Rem(145px);position: absolute;text-align: center;
}
.f_cc{
    width: 100%;height: px2Rem(145px);position: relative;text-align: center;
}
.dd0{
    position: absolute;top: px2Rem(100px);left: 15%;text-align: left;
}
.dd1{
    position: absolute;top: 140%;left: 10%;text-align: left;
}
.dd2{
    position: absolute;top: 140%;left: 60%;text-align: left;
}
.dd3{
    position: absolute;top: px2Rem(180px);left: 44%;text-align: left;width: px2Rem(400px);
}

.liquidity div{
    margin-top: px2Rem(20px);
}

.liquidity{
    margin-top:100px
}
.liquidity_img{
    width: 50%;height:300px;
    position: absolute;top: px2Rem(450px);margin: auto;left: 25%;z-index: -1;
}

.mahadao-logo img{
    width: 50%;
    margin-top: px2Rem(14px);
    margin: auto;
    
}
#header .nav-icon{
    display:none !important;
}
#header{
    display: flex;
    height: px2Rem(100px);
    justify-content: space-between;
    align-items: center;
}
.nav-link{
    display: inline-block !important;
    padding-top: px2Rem(10px) !important;
    padding-bottom: px2Rem(10px) !important;
}

.title{
    display: flex;
    height: px2Rem(100px);
    width: px2Rem(1200px);
    padding-left: 0!important;
    padding-right: 0!important;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}



.ob11{
        width: px2Rem(709px);
        height: px2Rem(165px);
        font-size: px2Rem(64px);
        margin-top: px2Rem(100px);
        font-family: Fontquan-XinYilogoTi;
        font-weight: 400;
        line-height: px2Rem(88px);
        color: #FFFFFF;
        opacity: 1;
        
}
.ob22{
    line-height: px2Rem(30px);margin-left: px2Rem(20px); font-size: px2Rem(18px);
            color: #A7A1C7;
}

.st1,#store-title{
    height: px2Rem(1080px);
}
.ee1,#session{
    height:864px
}

.bb_con{
    margin-top: px2Rem(20px);
        font-size: px2Rem(16px);
        font-family: PingFang SC;
        font-weight: 400;
        line-height: px2Rem(32px);
        color: #A7A1C7;
        opacity: 1;
}
.bb_ti{
    font-size: px2Rem(28px);
    font-family: PingFang SC;
    font-weight: 800;
    line-height: px2Rem(40px);
    color: #FFFFFF;
    opacity: 1;
        
}